<template>
    <div class="min-h-screen bg-gray-50 flex flex-col">
      <div class="container mx-auto px-4 py-6 flex items-center justify-between">
        <h1 class="text-2xl font-bold text-dark">AI聊天</h1>
        <div class="flex items-center gap-4">
          <button class="bg-primary text-white p-2 rounded-lg hover:bg-primary/90 transition-colors">
            <i class="fa fa-plus"></i> 新建对话
          </button>
          <button class="bg-gray-200 text-gray-700 p-2 rounded-lg hover:bg-gray-300 transition-colors">
            <i class="fa fa-cog"></i> 设置
          </button>
        </div>
      </div>
  
      <div class="flex flex-1 overflow-hidden">
        <!-- Conversations Sidebar -->
        <div class="w-64 bg-white shadow-md hidden md:block">
          <div class="p-4 border-b">
            <input type="text" placeholder="搜索对话..." class="w-full px-4 py-2 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50">
          </div>
          <div class="overflow-y-auto max-h-[calc(100vh-12rem)]">
            <div class="p-4 hover:bg-gray-50 cursor-pointer border-l-4 border-primary bg-gray-50">
              <h3 class="font-medium">项目规划讨论</h3>
              <p class="text-sm text-gray-500 mt-1">AI: 我建议我们先进行市场调研...</p>
              <p class="text-xs text-gray-400 mt-1">今天 14:30</p>
            </div>
            <div class="p-4 hover:bg-gray-50 cursor-pointer">
              <h3 class="font-medium">创意写作助手</h3>
              <p class="text-sm text-gray-500 mt-1">AI: 从前有一个小村庄，里面住着...</p>
              <p class="text-xs text-gray-400 mt-1">今天 10:15</p>
            </div>
            <div class="p-4 hover:bg-gray-50 cursor-pointer">
              <h3 class="font-medium">数据分析报告</h3>
              <p class="text-sm text-gray-500 mt-1">AI: 根据数据分析，我们可以看到...</p>
              <p class="text-xs text-gray-400 mt-1">昨天 16:45</p>
            </div>
            <div class="p-4 hover:bg-gray-50 cursor-pointer">
              <h3 class="font-medium">代码生成</h3>
              <p class="text-sm text-gray-500 mt-1">AI: 这是一个Python实现的快速排序...</p>
              <p class="text-xs text-gray-400 mt-1">昨天 09:20</p>
            </div>
          </div>
        </div>
  
        <!-- Chat Area -->
        <div class="flex-1 flex flex-col bg-white shadow-md">
          <div class="p-4 border-b flex justify-between items-center">
            <div>
              <h2 class="font-bold">项目规划讨论</h2>
              <p class="text-sm text-gray-500">使用 对话模型</p>
            </div>
            <div class="flex gap-2">
              <button class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-share-alt"></i>
              </button>
              <button class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </div>
  
          <div class="flex-1 overflow-y-auto p-6 space-y-6" ref="chatContainer">
            <!-- System Message -->
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-3">
                <i class="fa fa-info-circle text-primary"></i>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg rounded-tl-none max-w-2xl">
                <p class="text-gray-700">欢迎使用AI助手！我是您的智能助手，今天有什么可以帮助您的吗？</p>
              </div>
            </div>
  
            <!-- User Message -->
            <div class="flex items-start justify-end">
              <div class="bg-primary p-4 rounded-lg rounded-tr-none max-w-2xl">
                <p class="text-white">我正在规划一个新的项目，需要一些建议。</p>
              </div>
              <div class="bg-gray-200 p-3 rounded-full ml-3">
                <i class="fa fa-user text-gray-600"></i>
              </div>
            </div>
  
            <!-- AI Message -->
            <div class="flex items-start">
              <div class="bg-primary/10 p-3 rounded-full mr-3">
                <i class="fa fa-robot text-primary"></i>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg rounded-tl-none max-w-2xl">
                <p class="text-gray-700">我建议我们先进行市场调研，了解目标用户的需求和痛点。这将帮助您确定项目的方向和重点。您能告诉我更多关于您的项目的信息吗？例如，它是什么类型的项目，目标用户是谁，以及您希望实现什么目标？</p>
              </div>
            </div>
  
            <!-- User Message -->
            <div class="flex items-start justify-end">
              <div class="bg-primary p-4 rounded-lg rounded-tr-none max-w-2xl">
                <p class="text-white">这是一个面向中小企业的AI应用平台，我希望帮助他们更轻松地使用AI技术。</p>
              </div>
              <div class="bg-gray-200 p-3 rounded-full ml-3">
                <i class="fa fa-user text-gray-600"></i>
              </div>
            </div>
  
            <!-- AI Message (Loading) -->
            <div class="flex items-start" v-if="loading">
              <div class="bg-primary/10 p-3 rounded-full mr-3">
                <i class="fa fa-robot text-primary"></i>
              </div>
              <div class="bg-gray-50 p-4 rounded-lg rounded-tl-none max-w-2xl">
                <div class="flex space-x-2">
                  <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                  <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
                  <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                </div>
              </div>
            </div>
          </div>
  
          <div class="p-4 border-t">
            <div class="relative">
              <textarea 
                v-model="message" 
                placeholder="输入消息..." 
                class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/50 resize-none h-20"
                @keyup.enter="sendMessage"
              ></textarea>
              <button 
                :disabled="!message || loading"
                class="absolute right-3 bottom-3 bg-primary text-white p-2 rounded-lg hover:bg-primary/90 transition-colors"
                @click="sendMessage"
              >
                <i class="fa fa-paper-plane"></i>
              </button>
            </div>
            <div class="flex justify-between mt-3 text-sm text-gray-500">
              <div>按 Enter 发送，Shift + Enter 换行</div>
              <div>支持 Markdown 语法</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted, computed } from 'vue'
  import { useStore } from 'vuex'
  
  export default {
    name: 'ChatView',
    setup() {
      const store = useStore()
      const chatContainer = ref(null)
      const message = ref('')
      const loading = computed(() => store.getters.loading)
  
      const sendMessage = async () => {
        if (!message.value.trim() || loading.value) return
        
        const conversationId = 'current-conversation-id' // 实际应用中应从store获取
        
        // 模拟发送消息
        store.commit('ADD_MESSAGE', {
          conversationId,
          message: {
            content: message.value,
            role: 'user',
            timestamp: new Date().toISOString()
          }
        })
        
        // 模拟AI回复
        store.commit('SET_LOADING', true)
        
        setTimeout(() => {
          store.commit('ADD_MESSAGE', {
            conversationId,
            message: {
              content: "感谢您的消息！我是一个AI助手，目前处于演示模式。在实际应用中，我会根据您的问题提供相应的回答和建议。",
              role: 'assistant',
              timestamp: new Date().toISOString()
            }
          })
          store.commit('SET_LOADING', false)
          scrollToBottom()
        }, 1500)
        
        message.value = ''
        scrollToBottom()
      }
  
      const scrollToBottom = () => {
        if (chatContainer.value) {
          chatContainer.value.scrollTop = chatContainer.value.scrollHeight
        }
      }
  
      onMounted(() => {
        scrollToBottom()
      })
  
      return {
        chatContainer,
        message,
        loading,
        sendMessage
      }
    }
  }
  </script>
      